/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
<!-- 自定义底图 -->
<div class="cross-map-part" ref="crossmap">
  <div v-if="mapreset && CrossMapData.type === 'vectorgraph'">
    <!-- 底图可缩放 -->
    <!-- <drr
      id="crossmapdrr"
      :selectable="isSeletable"
      :x="crossmapitem.x"
      :y="crossmapitem.y"
      :w="crossmapitem.w"
      :h="crossmapitem.h"
      :angle="crossmapitem.angle"
      :aspectRatio="true"
      @dragstop="mapDragStop(crossmapitem, ...arguments)"
      @resizestop="mapResizeStop(crossmapitem, ...arguments)"
      @rotatestop="mapRotateStop(crossmapitem, ...arguments)"
    >
      <div class="cross-map" v-html="CrossMapData.svgstr"></div>
    </drr> -->

    <!-- 底图取消操作 -->
    <div class="cross-map" :style="{'width': crossmapitem.w + 'px', 'height': crossmapitem.h + 'px'}" v-html="CrossMapData.svgstr"></div>
  </div>

  <div v-if="mapreset && CrossMapData.type === 'picture'" class="cross-map">
    <img height="100%" :src="CrossMapData.imgfilesrc">
  </div>
 </div>
</template>

<script>
export default {
  data () {
    return {
      crossmapitem: {},
      mapreset: false
    }
  },
  props: {
    CrossMapData: {
      type: Object
    },
    isSeletable: {
      type: Boolean
    },
    pointchange: {
      type: Boolean
    }
  },
  watch: {
    CrossMapData: {
      handler: function (val) {
        this.crossmapitem = {
          x: 0,
          y: 0,
          w: 0,
          h: 0,
          angle: 0
        }
        if (val.type === 'vectorgraph') {
          if (val.svgstr === '') {
            this.mapreset = false
            return
          }
          this.mapreset = true
          this.crossmapitem = {
            x: val.x,
            y: val.y,
            w: val.w,
            h: val.h,
            angle: val.angle
          }
        }
        if (val.type === 'picture') {
          if (val.imgfilesrc === undefined || val.imgfilesrc === '') {
            this.mapreset = false
            return
          }
          this.mapreset = true
        }
      },
      deep: true
    },
    crossmapitem: {
      handler: function (newval, oldval) {
        if ((JSON.stringify(oldval) !== '{}') && !this.isEqual(newval, oldval)) {
          // 更改原数据的位置大小数据
          let data = {
            ...this.CrossMapData,
            ...newval
          }
          let fields = Object.keys(newval)
          this.$emit('changeCrossMap', data, fields)
        }
      }
    },
    pointchange: {
      handler: function (val) {
        // 解决光标样式被选区样式覆盖问题
        let dom = document.getElementById('crossmapdrr')
        if (dom === null || dom === undefined) return
        if (val) {
          dom.style.cursor = 'url(resource/pic/icons/magnifier3.cur) 12 12,crosshair'
          return
        }
        dom.style.cursor = 'url(resource/pic/icons/magnifier3.cur) 12 12,default'
      }
    }
  },
  created () {
    this.crossmapitem = {
      x: this.CrossMapData.x,
      y: this.CrossMapData.y,
      w: this.CrossMapData.w,
      h: this.CrossMapData.h,
      angle: this.CrossMapData.angle
    }
  },
  methods: {
    mapDragStop (origin, final) {
      // 底图拖动停止
      this.crossmapitem = JSON.parse(JSON.stringify(final))
    },
    mapResizeStop (origin, final) {
      // 底图改变大小停止
      this.resetMapSvg()
      this.crossmapitem = JSON.parse(JSON.stringify(final))
      // this.$refs.crossmap.style.height = final.w + 'px'
      // this.$refs.crossmap.style.width = final.h + 'px'
    },
    mapRotateStop (origin, final) {
      // 底图旋转停止
      this.crossmapitem = JSON.parse(JSON.stringify(final))
    },
    resetMapSvg () {
      // 重绘底图svg
      this.mapreset = false
      this.$nextTick(() => {
        this.mapreset = true
      })
    },
    isEqual (obj1, obj2) {
      if (!(obj1 instanceof Object) || !(obj2 instanceof Object)) {
        return obj1 === obj2
      }
      if (Object.keys(obj1).length !== Object.keys(obj2).length) {
        return false
      }
      for (var attr in obj1) { // 逐个值进行判断
        if (obj1[attr] instanceof Object && obj2[attr] instanceof Object) {
          return this.isEqual(obj1[attr], obj2[attr])
        } else if (obj1[attr] !== obj2[attr]) {
          return false
        }
      }
      return true
    }
  }
}
</script>

<style>

</style>
